import 'package:earclean/app/config/colors.dart';
import 'package:earclean/app/modules/widget/load_network_image_widget.dart';
import 'package:earclean/app/modules/widget/login_button.dart';
import 'package:earclean/app/routes/app_pages.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/src/size_extension.dart';
import 'package:get/get.dart';

class PayDialogView extends StatefulWidget {
  final Map info;
  const PayDialogView({required this.info});

  @override
  State<PayDialogView> createState() => _PayDialogViewState();
}

class _PayDialogViewState extends State<PayDialogView> {
  final unm = 1.obs;

  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(
          width: 1.sw - 50,
          height: 230,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10.r))),
          child: Stack(
            children: [
              Positioned.fill(
                child: Column(
                  children: [
                    const SizedBox(
                      height: 30,
                    ),
                    infoWidget(),
                    Container(
                      width: 1.sw,
                      margin: const EdgeInsets.symmetric(horizontal: 18),
                      height: 1,
                      color: Colors.grey[350],
                    ),
                    Container(
                      padding:
                          EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                      child: Row(
                        children: [
                          Expanded(
                            child: Text('购买数量',
                                style: TextStyle(
                                  fontSize: 15.sp,
                                  color: ColorConfig.text_label,
                                )),
                          ),
                          InkWell(
                            onTap: () {
                              if (unm.value > 1) {
                                unm.value = unm.value - 1;
                              }
                            },
                            child: Container(
                              width: 25,
                              height: 25,
                              alignment: Alignment.center,
                              color: Colors.grey[200],
                              child: Text('—',
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: ColorConfig.white,
                                  )),
                            ),
                          ),
                          Container(
                              padding: EdgeInsets.symmetric(horizontal: 10),
                              child: Obx(() => Text(unm.value.toString(),
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: ColorConfig.body1_txt_color,
                                  )))),
                          InkWell(
                            onTap: () {
                              unm.value = unm.value + 1;
                            },
                            child: Container(
                              width: 25,
                              height: 25,
                              alignment: Alignment.center,
                              color: Colors.grey[200],
                              child: Text('+',
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: ColorConfig.white,
                                  )),
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      width: 1.sw,
                      margin: const EdgeInsets.symmetric(horizontal: 18),
                      height: 1,
                      color: Colors.grey[350],
                    ),
                    Container(
                      padding:
                          EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                      child: Row(
                        children: [
                          Text('待下单',
                              style: TextStyle(
                                fontSize: 15.sp,
                                color: ColorConfig.text_label,
                              )),
                          SizedBox(width: 5),
                          Obx(() => Text(
                              ((widget.info['price'] ?? 0) * unm.value)
                                      .toString() +
                                  "元",
                              style: TextStyle(
                                fontSize: 15.sp,
                                color: Colors.red,
                              ))),
                          Spacer(),
                          InkWell(
                            onTap: () {
                              Get.toNamed(Routes.PAY, arguments: {
                                "num": unm.value,
                                ...widget.info,
                              });
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                color: ColorConfig.app_main,
                                // border: Border.all(color: ColorConfig.app_main, width: .5),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5.r)),
                              ),
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 13, vertical: 5),
                              child: Text('去下单',
                                  style: TextStyle(
                                    fontSize: 15.sp,
                                    color: ColorConfig.white,
                                  )),
                            ),
                          ),
                          // Container(
                          //   height: 30,
                          //   width: 80,
                          //   child: SizedBox(
                          //     child: LoginButton(
                          //       "去支付",
                          //       enable: true,
                          //       onPressed: () {
                          //         Get.until((route) =>
                          //             route.settings.name == Routes.TABLE);
                          //         // Get.find<TabbarController>().selectZhiYue();
                          //       },
                          //     ),
                          //   ),
                          // ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Positioned(
                  top: 15,
                  right: 15,
                  child: InkWell(
                    onTap: () {
                      Get.back();
                    },
                    child: Image.asset(
                      'assets/images/tab-关闭.png',
                      width: 20.r,
                    ),
                  ))
            ],
          )),
    );
  }

  infoWidget() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: ColorConfig.white,
        // border: Border.all(color: ColorConfig.app_main, width: .5),
        borderRadius: BorderRadius.all(Radius.circular(10.r)),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            clipBehavior: Clip.hardEdge,
            decoration: const BoxDecoration(
              // border: Border.all(color: ColorConfig.app_main, width: .5),
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            child: LoadNetworkImageWidget(
                width: 80, height: 80, imageUrl: widget.info['pic'] ?? ""),
          ),
          const SizedBox(width: 15),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 5),
                Text(widget.info['title'] ?? "",
                    style: TextStyle(
                      fontSize: 13.sp,
                      color: ColorConfig.text_label,
                    )),
                const SizedBox(height: 10),
                Row(
                  children: [
                    Text('服务时长：' + (widget.info['timer'] ?? ""),
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Color(0xFF5A5A5A),
                        )),
                  ],
                ),
                const SizedBox(height: 10),
                Text('${widget.info['price'] ?? ""}元/人',
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Colors.red,
                    )),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
